<template>
  <div class="home">
    <v-row justify="center" align="center" no-gutters class="my-10">
      <v-col :cols="4">
        <v-select
          v-model="form.status"
          :items="[
            // ALL全部   -2=交易关闭,-1=已取消,0=待付款,1=待取货,2=待归还,3=已完成
            { text: $t('all'), value: 'ALL' },
            { text: $t('tradecancel'), value: '-2' },
            { text: $t('canceled'), value: '-1' },
            { text: $t('needpay'), value: '0' },
            { text: $t('needget'), value: '1' },
            { text: $t('needback'), value: '2' },
            { text: $t('finished'), value: '3' }
          ]"
          multiple
          outlined
          hide-details
          :label="$t('orderstatus')"
        />
      </v-col>

      <v-btn class="ml-10 btn" rounded @click="search">
        {{ $t('search') }}
      </v-btn>
    </v-row>
    <v-row class="mx-5">
      <v-card
        v-for="item in orderList"
        :key="item.id"
        elevation="2"
        style="min-width: 60vw"
        full-width
        class="mx-auto my-8"
        @click="gotoDetail(item)"
      >
        <v-card-title>
          <v-row no-gutters justify="space-between">
            <span> {{ $t('orderno') }} : {{ item.ordersn }}</span>
            <span class="mr-3">{{ getOrderStatus(item.status) }}</span>
          </v-row>
        </v-card-title>
        <v-card-text>
          <div class="my-4 text-subtitle-1">
            {{ $t('paystatus') }} : {{ getStatus(item.pay_status) }}
          </div>

          <v-row no-gutters align="center" justify="space-between">
            <span> {{ $t('payamount') }} ： {{ item.payfee }} </span>
            <v-btn
              v-if="item.status === 0 && (item.pay_status === 0 || item.pay_status === 3)"
              dark
              class="mr-2"
              @click.stop="
                $router.push(localePath({ path: '/payment', query: { ordersn: item.ordersn } }))
              "
            >
              {{ $t('gopay') }}
            </v-btn>
          </v-row>
        </v-card-text>

        <v-divider class="mx-4" />
      </v-card>
    </v-row>
    <v-pagination v-model="form.pageNumber" :length="pageLength" />
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'OrderList',
  data: () => ({
    form: {
      pageNumber: 1,
      pageSize: 10,
      status: ['ALL'] // 订单状态:ALL全部   -2=交易关闭,-1=已取消,0=待付款,1=待取货,2=待归还,3=已完成
    },
    orderList: [],
    pageLength: 1
  }),
  watch: {
    'form.pageNumber'() {
      this.search();
    }
  },
  mounted() {
    this.search();
  },
  methods: {
    search() {
      const postData = JSON.parse(JSON.stringify(this.form));
      postData.status = postData.status + '';
      this.$api.post('/order/getOrderList', postData).then((res) => {
        console.log(res);
        this.orderList = res.data;
        this.pageLength = Math.ceil(res.total / 10);
      });
    },
    getOrderStatus(val) {
      // 订单状态:-2=交易关闭,-1=已取消,0=待付款,1=待取货,2=待归还,3=已完成
      if (String(val) === '-2') {
        return this.$t('tradecancel');
      }
      if (String(val) === '-1') {
        return this.$t('canceled');
      }
      if (String(val) === '0') {
        return this.$t('needpay');
      }
      if (String(val) === '1') {
        return this.$t('needget');
      }
      if (String(val) === '2') {
        return this.$t('needback');
      }
      if (String(val) === '3') {
        return this.$t('finished');
      }
    },
    getStatus(val) {
      // 0未支付 1支付中 2支付成功 3支付失败 11退款中 12退款成功
      if (String(val) === '0') {
        return this.$t('unpaid');
      }
      if (String(val) === '1') {
        return this.$t('paymentinprogress');
      }
      if (String(val) === '2') {
        return this.$t('paymentsuccessful');
      }
      if (String(val) === '3') {
        return this.$t('paymentfailed');
      }
      if (String(val) === '11') {
        return this.$t('refundinprogress');
      }
      if (String(val) === '12') {
        return this.$t('refundsuccessful');
      }
    },
    gotoDetail(item) {
      this.$router.push(
        this.localePath({ path: '/orderdetail', query: { ordersn: item.ordersn } })
      );
    }
  }
};
</script>
<style scoped lang="scss">
.search-condition {
  height: 110px;
  background: #ffffff;
  box-shadow: 0px 20px 60px 0px rgba(167, 174, 174, 0.08);
}

.more-condition {
  height: 82px;
  background: #fbfbfb;
}

.btn {
  margin-top: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 200px;
  height: 40px !important;
  background: rgb(252, 246, 246) !important;
  border-radius: 28px;
  border: 1px solid #fad8da;
  font-family: Poppins, Poppins;
  font-weight: 600;
  font-size: 16px;
  color: #e42129;
  line-height: 25px;
  text-align: center;
  font-style: normal;
  box-shadow: none;
}
</style>
